<style lang="scss" scoped>
    .mint-header {
        background-color: transparent;
        border-bottom: none;
    }
    .pool-page {
        height: 100%;
        overflow-y: hidden;
        padding-top: 4.76rem;
    }
    .curve-charts {
        position: absolute;
        top: 0;
        width: 100%;
        height: 4.76rem;
        background-image: url('~assets/img/poolcharts-bg.png');
        background-repeat: no-repeat;
        background-size: 100%;
    }
    .pool-info {
        height: 100%;
        overflow-y: auto;
        padding: 0 .24rem;
        .title {
            line-height: .76rem;
            font-size: .3rem;
            &:before{
                position: relative;
                display: inline-block;
                content: '';
                width: .1rem;
                height: .1rem;
                vertical-align: middle;
                background: #1C93FB;
                margin-right: .14rem;
            }
        }
        .info-box {
            width: 100%;
            height: 4rem;
            background:rgba(255,255,255,1);
            border-radius: .1rem;
            box-shadow: .01rem 0 .18rem rgba(185,185,185,0.4);
            overflow: hidden;
        }
        .info {
            width: 100%;
            height: 1rem;
            line-height: 1rem;
            font-size: .24rem;
            padding: 0 .24rem;   
            &:first-child {
                background: #1C93FB;
                color: #fff;
            }
            span {
                width: 40%;
                text-align: left;
                float: left;
                &:last-child {
                    width: 20%;
                }
            }
        }
    }
</style>

<template>
    <div class="pool-page">
        <mt-header fixed title="泳池信息">
            <mt-button icon="back" slot="left" @click="$router.push('/homepage')"></mt-button>
            <mt-button icon="edit" slot="right" @click="editPoolInfoModal.visible = true"></mt-button>
        </mt-header>
        <div class="curve-charts">
            <CurveCharts refs="poolChart" :options="options"></CurveCharts>
        </div>
        <div class="pool-info">
            <div class="title">水质信息</div>
            <div class="info-box">
                <div class="info">
                    <span>检测内容</span>
                    <span>合格标准</span>
                    <span>检测结果</span>
                </div>
                <div class="info">
                    <span>水温</span>
                    <span>22 - 26℃</span>
                    <span>26.0℃</span>
                </div>
                <div class="info">
                    <span>pH值</span>
                    <span>6.5 - 8.5</span>
                    <span>7.6</span>
                </div>
                <div class="info">
                    <span>日平均换水率</span>
                    <span>≥10%</span>
                    <span>8.36%</span>
                </div>
            </div>
        </div>
        <EditPoolInfoModal v-model="editPoolInfoModal.visible"></EditPoolInfoModal>
    </div>
</template>

<script>
    import EditPoolInfoModal from './EditPoolInfoModal.vue'
    import CurveCharts from './CurveCharts.vue'
    export default {
        components: {
            EditPoolInfoModal,
            CurveCharts,
        },
        data() {
            return {
                editPoolInfoModal: {
                    visible: false
                },
                options: {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            lineStyle: {
                                color: '#61b4fc'
                            }
                        }
                    },
                    grid: {
                        left: 0,
                        right: 0,
                        bottom: 0,
                        width: 'auto',
                        containLabel: true
                    },
                    xAxis:  {
                        zlevel: 1,
                        type: 'category',
                        boundaryGap: false,
                        offset: -10,
                        axisLabel:{
                            interval: function(index, value) {
                                if(index%3 === 2 && value !== '23:45') {
                                    return true
                                } 
                                return false
                            },
                            color: '#fff',
                            inside: true,
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false,
                            inside: true,
                        },
                        axisPointer:{
                            label: {
                                show: false,
                                formatter:  '时间：{value}' 
                            },
                        },
                        data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
                    },
                    yAxis: {
                        type: 'value',
                        show: false,
                        axisLabel: {
                            formatter: '{value}'
                        },
                        axisLabel:{
                            inside: true,
                        },
                        axisTick: {
                            inside: true,
                        },
                        axisPointer:{
                            show: false,
                            label: {
                                formatter:  '人数：{value}' 
                            },
                        },
                    },
                    series: [
                        {
                            name:'人数',
                            type:'line',
                            smooth: true,
                            lineStyle: {
                                color: '#61b4fc',
                                width: 0
                            },
                            itemStyle: {
                                color: '#61b4fc',
                                opacity: 0
                            },
                            areaStyle: {
                                color: '#61b4fc'
                            },
                            data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],
                        }
                    ]            
                }
            }
        },
    }
</script>
